<template>
  <div class="container">
    <div class="login-wrp">
      <section class="section">
        <form autocomplete="false">
          <div class="form-group border-bottom-1px">
            <input type="tel" name="mobile" class="form-control" maxlength="11" v-model="ruleForm.mobile" placeholder="请输入手机号"/>
          </div>
          <div class="input-group border-bottom-1px">
            <input type="tel" class="form-control" name="captcha" maxlength="6" v-model="ruleForm.captcha" placeholder="请输入验证码">
            <div class="input-group-append">
              <button type="button" class="input-group-text" @click="sendCaptcha" v-show="timeLeft === 0">获取验证码</button>
              <button type="button" class="input-group-text" @click="sendCaptcha" v-show="timeLeft > 0">{{timeLeft}}s</button>
            </div>
          </div>
          <div class="form-group border-bottom-1px">
            <input type="password" name="password" class="form-control" minlength="8" maxlength="20" v-model="ruleForm.password" placeholder="请输入新密码"/>
          </div>
          <div class="form-group btn-register">
            <button type="button" class="btn btn-block btn-login" 
              @click="submitForm('form-validate')">确定</button>
          </div>
        </form>
      </section>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import md5 from 'blueimp-md5'
  import {forgotPassword, captchaForgotPass} from '@/service/index'
  import Validate from '@/utils/Validate'
  import Util from '@/utils/Util'

  export default {
    props: ['agentId'],
    data() {
      return {
        timeLeft: 0,
        ruleForm: {
          password: '',
          mobile: '',
          captcha: ''
        }
      }
    },
    methods: {
      doReset() {
        let _this = this
        let params = this.ruleForm
        let password = md5(params.password)

        forgotPassword(password, params.captcha, params.mobile, this.agentId)
          .then((resp) => {
            Util.handleResponse(resp, resp.msg, function () {
              console.log(resp)
              _this.$router.push({path: `/login/${_this.agentId}`})
            })
          })
          .catch((error) => {
            console.log(error)
          })
      },
      submitForm(formName) {
        let validator = new Validate(
          {
            mobile: {
              required: true,
              tel: true
            },
            password: {
              required: true
            },
            captcha: {
              required: true,
              digits: true,
              minlength: 6,
              maxlength: 6
            }
          },
          {
            mobile: {
              required: '请输入手机号',
              tel: '请输入正确的手机号'
            },
            password: {
              required: '请输入密码'
            },
            captcha: {
              required: '请输入验证码',
              digits: '请输入6位数字验证码',
              minlength: '请输入6位数字验证码',
              maxlength: '请输入6位数字验证码'
            }
          }
        )
        if (!validator.checkForm(this.ruleForm)) {
          const error = validator.errorList[0]
          Util.msg(error.msg)
          return false
        }
        this.doReset()
      },
      sendCaptcha() {
        let _this = this
        if (!this.isPhone()) {
          Util.msg('请输入正确的手机号')
          return
        }
        if (this.timeLeft > 0) {
          return Util.msg('短信已发送，请注意查收')
        }

        captchaForgotPass(this.ruleForm.mobile, this.agentId)
        .then((resp) => {
          console.log(resp)
          if (parseInt(resp.code) === 1) {
            _this.countDown()
          } else {
            Util.msg(resp.msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      isPhone() {
        return (/^1[34578]\d{9}$/.test(this.ruleForm.mobile))
      },
      countDown() {
        let _this = this
        _this.timeLeft = 60
        this.timer = setInterval(function () {
          _this.timeLeft--
          if (_this.timeLeft <= 0) {
            clearInterval(_this.timeLeft)
            _this.timeLeft = 0
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/variable.styl"

  .login-wrp
    .section
      padding-top: 1rem
      margin-top: 0
      .nav-tab
        margin-top: 1.6rem
        .tab-item
          position: relative
          padding-bottom: 8px
          text-align: center
          font-size: 0.7rem
          color: #666
          &.active
            color: #f08250
            &:after
              position: absolute
              bottom: 0
              left: 0
              right: 0
              content: ''
              border-bottom: 2px solid #FF5303
      .btn-login
        margin-top: 1.4rem
        background: #FE4D10;
        box-shadow: inset 0 1px 2px 0 rgba(255,181,181,0.50);
        border-radius: 7px;
      .form-group
        margin-bottom: 0
      .input-group
        margin-bottom: 0
        .form-control
          border-right: none
        .input-group-append
          .input-group-text
            font-size: 14px
            color: #f08250
            background-color: $color-white
            border-left: none
      .agreement
        margin-top: 0.6rem
        padding-left: 0.4rem
        .text
          font-size: 0.65rem
          color: #333
          &.link
            color: #f08250
      .forgot-pwd
        margin-top: 0.6rem
        padding-left: 0.4rem
        .link
          font-size: 0.65rem
          color: #f08250
</style>
